<template>
  <span @click="doOpenDialog">
    <slot>
      <a-tag v-for="(row, index) in currValue" :key="index" color="blue" :visible="true">
        {{row.name}}
      </a-tag>
      <a-button size="small" type="link" icon="form" />
    </slot>
  </span>
</template>
<script>
import {Modal} from 'ant-design-vue'
export default {
  name: 'TreeTransferDialog',
  props: {
    value: Array,
    /**
     * dataUrl: 穿梭框左框数据查询接口
     * queryParams: 穿梭框座框数据查询参数
     * field: 中间表字段，关联到到左表（当前主表）
     * title: 穿梭框左框标题
     * value: 左表当前值，即在左表（主表）管理模块中选中的数据ID
     */
    leftOptions: Object,
    /**
     * addUrl: 实时保存数据的后台接口
     * deleteUrl: 实时删除数据的后台接口
     * field: 中间表字段，关联到右表
     * title: 穿梭框右框标题
     */
    rightOptions: Object,
    width: Number,
    height: Number
  },
  data() {
    return {
      currValue: [],
      dialog: null
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    value() {
      this.init()
    },
  },
  methods: {
    init() {
      this.currValue = this.value
    },
    doOpenDialog() {
      let self = this
      this.modal = Modal.info({
        class: 'dmform-modal',
        width: this.width || 600,
        maskClosable: true,
        closable: true,
        okText: '关闭',
        onOk() {
          self.doClose()
        },
        onCancel() {
          self.doClose()
        },
        content: h => h('TreeTransfer', {
          style: {
            height: (this.height || 300) + 'px',
            overflow: 'auto'
          },
          props: {
            leftDataUrl: this.leftOptions.dataUrl,
            leftQueryParams: this.leftOptions.queryParams,
            leftField: this.leftOptions.field,
            leftValue: this.leftOptions.value,
            leftTitle: this.leftOptions.title,
            rightAddUrl: this.rightOptions.addUrl,
            rightDeleteUrl: this.rightOptions.deleteUrl,
            rightField: this.rightOptions.field,
            rightTitle: this.rightOptions.title,
          },
        })
      })
    },
    doClose() {
      // console.log('doClose...')
      this.$emit('onClose')
      if (this.modal) {
        this.modal.destroy()
      }
    }
  }
}
</script>
